﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    
    <link href="@Url.Content("~/Content/bootstrap-responsive.min.css")"  rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/bootstrap.min.css")"  rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/bootstrap-combobox.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery-2.0.0.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/bootstrap.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/knockout-2.2.1.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/knockout.mapping-latest.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/knockout.validation.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/koExternalTemplateEngine_all.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/underscore.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/underscore-ko-1.2.2.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-2.6.2.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/App/Namespaces.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/App/MainNav.js")" type="text/javascript"></script>
    
    <link rel="shortcut icon" href="~/Content/images/Butterfly.ico">
</head>
    <body>
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <div>
                        <div>
                            <a class="brand" href="@Url.Action("index", "Home")">Butterfly Cakes
                                <br/>
                                <span style="font-size: small; color: #64042F">By Gemma Potter</span></a>
                        </div>
                        
                        <ul class="nav pull-right">
                            <li>
                                <div class="navItem" data-bind="css: app.mainNav.model.isHome"></div>
                                <a href="@Url.Action("Index", "Home")"><i class="icon-home"></i>
                                    Home</a> 
                            </li>
                            <li>
                                <div class="navItem" data-bind=""></div>
                                <a href="@Url.Action("About", "Home")"><i class="icon-info-sign"></i>
                                    About Us</a> 
                            </li>
                            <li class="dropdown">
                                <div class="navItem"></div>
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-camera"></i>
                                    Gallary <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="@Url.Action("About", "Home")">Wedding Cakes</a></li>
                                    <li><a href="@Url.Action("About", "Home")">Birthday Cakes</a></li>
                                    <li><a href="@Url.Action("About", "Home")">Cup Cakes</a></li>
                                </ul>
                            </li>
                            <li class="dropdown">
                                <div class="navItem"></div>
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-exclamation-sign"></i>
                                    Admin <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="@Url.Action("About", "Home")">Login / Out</a></li>
                                    <li><a href="@Url.Action("About", "Home")">Manage</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="page">
            <section id="main">
                <p>Currently Selected Page: <strong data-bind="text: app.mainNav.model.page"></strong></p
                @RenderBody()
            </section>
        </div>
        
        <script type="text/javascript">
//            var Model = function () {
//                var self = this;
//                self.page = ko.observable('Home');

//                self.IsHome = ko.computed(function () {
//                    var result = self.page() == 'Home' ? "navSelected" : "";
//                    return result;
//                }, self);

//                self.IsAbout = ko.computed(function () {
//                    var result = self.page() == 'About' ? "navSelected" : "";
//                    return result;
//                }, self);
//            };
//            ko.applyBindings(new Model());
        //app.mainNav.init();
        </script>
    </body>
</html>
